<template>
  <el-drawer v-model="obj.visible" size="90%" :with-header="false">
    <div>
      <el-row :gutter="20">
        <el-col :span="18">
          <OrderDetail :order="order_detail"/>
          <el-table :data="obj.vm_table" stripe show-summary :summary-method="getSummaries" border>
            <el-table-column prop="vm_name" label="虚拟机名称"/>
            <el-table-column prop="cpu_arch_text" label="CPU架构"/>
            <el-table-column prop="os_text" label="操作系统"/>
            <el-table-column prop="net_location_text" label="网络位置"/>
            <el-table-column prop="security_domain_text" label="安全分区"/>
            <el-table-column prop="flavor_text" label="规格(申请)"/>
            <el-table-column prop="actual_flavor_text" label="规格(实际)" min-width="150"/>
            <el-table-column prop="disk_size" label="数据盘(申请)"/>
            <el-table-column prop="actual_disk_size" label="数据盘(实际)" min-width="120"/>
            <el-table-column prop="cluster_name" label="资源池" min-width="150"/>
          </el-table>
          <el-table :data="obj.net_table"  border>
            <el-table-column prop="resource_name" label="资源名称"/>
            <el-table-column prop="net_location_text" label="网络位置"/>
            <el-table-column prop="security_domain_text" label="安全分区"/>
            <el-table-column prop="ipaddress" label="IP地址" min-width="150"/>
            <el-table-column prop="netmask" label="掩码" min-width="150"/>
            <el-table-column prop="gateway" label="网关" min-width="150"/>
            <el-table-column prop="vlan_id" label="VlanID" min-width="120"/>
          </el-table>
        </el-col>
        <el-col :span="6">
          <h2>历史记录</h2>
          <el-timeline >
            <el-timeline-item size="large" v-for="(item,index) in obj.order_history" :timestamp="item.timestamp" placement="top" :type="item.type" :hollow="false">
                <h4>{{ item.title }}</h4>
                <p>{{ item.content }}</p>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button type="primary" size="large" @click="obj.visible=false" style="width: 300px;">关闭</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import OrderDetail from "./OrderDetail.vue";
defineProps({obj: {}, order_detail: {}})

const getSummaries = (param) => {
  const {columns, data} = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    let values = []
    if (column.property === 'cpu_arch_text') values = data.map(item => Number(item["actual_vcpu"]))
    if (column.property === 'os_text') values = data.map(item => Number(item["actual_memory"]))
    if (column.property === 'net_location_text') values = data.map(item => Number(item["vcpu"]))
    if (column.property === 'security_domain_text') values = data.map(item => Number(item["memory"]))
    if (column.property === 'disk_size') values = data.map(item => Number(item['disk_size']))
    if (column.property === 'actual_disk_size') values = data.map(item => Number(item['actual_disk_size']))
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
    } else {
      sums[index] = ''
    }
  })
  sums[5] = `${sums[3]}核|${sums[4]}GB`
  sums[6] = `${sums[1]}核|${sums[2]}GB`
  sums[7] += "GB"
  sums[8] += "GB"
  for (let i=1;i<5;i++){
    sums[i] = ''
  }
  return sums
}
</script>

<style scoped>

</style>